<template>
	<view class="app">
		<u-navbar :back-text-style="{color: '#fff'}" title-color="#fff" back-icon-color="#ffffff"
			back-icon-name="arrow-leftward" title="禾积分转入" :background="NavBackgroud"></u-navbar>
		<view class="min margin-top">
			<view class="title">
				<text class="title_text">转入二维码</text>
			</view>
			<view class="mid">
				<canvas canvas-id="qrcode" class="canvas-hide" />
				<image class="qrcode" :src="QRCode64"  @touchstart.native="showDelModal()" @touchend.native="clearLoop()" ></image>
				<!-- #ifdef APP-PLUS -->
				<view class="margin-top flex  justify-center ">
					<button class="cu-btn lg line-blue text-black" style="width: 100%;" @click="saveQr">点击保存</button>
				</view>				
				<!-- #endif -->
			</view>
			<view class="title">
				<text class="title_text">转入地址</text>
			</view>
			<view class="address">
				<view class="address_text">{{ address }}</view>
				<view class="address_copy" @click="copyValue">复制</view>
			</view>
		</view>
		<view class="remark">·禁止向地址转入当前币种之外的资产，任何充入当前币种地址的非当前币种资产将不可找回</view>
		<view class="remark">·转入完成后，你可以进入历史页面跟踪进度</view>
		<view class="remark">·您的转入地址不会经常改变，可以重复转入，如有更改，我们会尽量通过网站公告或邮件通知您</view>
		<view class="remark">·请务必确认电脑及浏览器安全，防止信息被篡改或泄露</view>
	</view>
</template>

<script>
	
	import uQRCode from '@/components/Sansnn-uQRCode/uqrcode.js'
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index'
	
	let that;
	export default {
		name: 'Index',
		components: {	},
		data() {
			return {
				address:"未知",
				QRCode64:null,
			};
		},
		methods: {
			// 复制地址
			copyValue(){
				uni.setClipboardData({
				    data: that.address,
				    success: function () {
				       this.$util.msg('复制成功');
				    }
				});
			},
			
			//生成二维码方法
			async makeQRCode(text){
				// 返回图片base64
				var res = await uQRCode.make({
				        canvasId: 'qrcode',
				        componentInstance: this,
				        text: text,
				        size: 354,
				        margin: 10,
				        backgroundColor: 'rgba(255,255,255,0)',
				        foregroundColor: '#000000',
				        fileType: 'png',
				        correctLevel: uQRCode.errorCorrectLevel.H
				      });
				this.QRCode64 = res;
				console.log(res);
			},
			
			showDelModal(){
				clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
				this.Loop = setTimeout(function() {
					uni.saveImageToPhotosAlbum({
						filePath: this.QRCode64,
						success: function () {
							this.$util.msg("保存成功");
						}
					});
					
				}.bind(this), 1000);
			},
			clearLoop(e) {
				clearTimeout(this.Loop);
			},
			saveQr() {
				let that =this;
				uni.showLoading({
					title: '正在保存...'
				})
				base64ToPath(that.QRCode64).then(path => {
						uni.saveImageToPhotosAlbum({
							filePath: path,
							success: function(res) {
								that.$util.Tips({
									title: '保存成功',
									icon: 'success'
								});
							},
							fail: function(res) {
								that.$util.Tips({
									title: '保存失败'
								});
							},
							complete: () => {
								uni.hideLoading();
							}
						})
					})
					.catch(error => {
						console.error(error)
						that.$util.Tips({
							title: '保存失败'
						});
						uni.hideLoading();
					})
			}
			
		},
		// 监听页面加载
		onLoad(event){
			that = this;	
			if(event.tokenAddress){
				that.address = event.tokenAddress;
				// 生成二维码
				that.makeQRCode(that.address);
			}else{
				console.log("event:"+event)
			}
			
		},
		// 监听页面显示
		onShow() {
		},
		// 监听页面隐藏
		onHide(){
		},
		// 监听页面卸载
		onUnload(){
		},
		// 监听页面下拉刷新
		onPullDownRefresh(){
		},
		// 组件：在实例创建完成后被立即调用
		created() {
		},
	};
	
</script>

<style>
	/* 相对路径 */
	@import url('./recharge.css');
</style>
